<template>
  <div class="maintenanceDetail-basic">
    <el-dialog title="新增工单" :visible="value" width="630px" @close="close">
      <div class="maintenanceDetail-img">
        <div class="maintenanceDetail-left">
          <img src="../../../assets/img/pic_1.png" alt="" style="width:26px;height:26px;">
          <span>待办</span>
        </div>
        <img src="../../../assets/img/pic_1.834b274c.png" alt="">
      </div>
      <div class="maintenanceDetail-main">
        <div class="mian-shuju">
          <div>设备编号：
            01000058</div>
          <div>运维人员：
            运维刘俊杰</div>
          <div>工单方式：
            手动</div>
        </div>
        <div class="mian-shuju">
          <div>创建日期：
            2023.04.24 17:16:23</div>
          <div>工单类型：
            维修工单</div>
          <div>备注：
            jg g</div>
        </div>
      </div>
      <div class="maintenanceDetail-bot">
        <el-button size="medium" class="custom-button2" type="primary">取消工单</el-button>
      </div>    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'MaintenanceDetail',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '100px'
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    close() {
      // 通知父组件关闭弹窗
      this.$emit('input', false)
      // 只对有校验的表单才会清空
      // this.$refs.fromRef.resetFields()
      // 将数据初始化,表单就会清空
      // this.form = this.$options.data().form
      // 需要清空一下这个id,不然在进行添加这个id会一直存在就一直编辑
      // this.$emit('update:edit-id', null)
    }
  }
}
</script>
<style lang='scss'  >
 .maintenanceDetail-basic{
  .el-dialog{
    border-radius: 10px;
    padding: 20px 20px 30px;
    position: relative;
  .el-input__inner{
      width: 396px;
    }
    .el-textarea{
      width: 88%;
    }
  }
  .maintenanceDetail-img{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    margin-bottom: 10px;
    .maintenanceDetail-left{
      display: flex;
      justify-content: space-between;
    align-items: center;
    span{
      margin-left:25px ;
    }
    }
  }
   .maintenanceDetail-main{
      display: flex;
      justify-content: space-between;
      .mian-shuju{
        div{
          margin: 30px;
        }
      }
    }
    .maintenanceDetail-bot{
      margin-bottom: 40px;;
  .custom-button2{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    color: #655b56;
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background-color: #fbf4f0;
    }
    .custom-button2:hover{
    background-color: #f3e7e1;
    }
    }

}
</style>
